<template>
  <div class="onemonidey">
    <div class="pieech echart">
      <div class="title">用电构成</div>
      <div class="pie" ref="pierefs"></div>
    </div>
    <div class="lineech echart">
      <div class="linetit">
        <div class="title">用能趋势</div>
        <div>
          <el-radio-group v-model="radio3" size="small" @change="changradio">
            <el-radio-button label="bar">柱状图</el-radio-button>
            <el-radio-button label="line">折线图</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="lineandbar" v-if="radio3=='bar'" ref="barrefs"></div>
      <div class="lineandbar" v-else ref="linerefs"></div>
    </div>
  </div>
</template>
<script>
import {getcompositionapi,gettrendlineapi} from '@/api/energy-consumption/energy-consuming/ConsumingConfiguration'
import {GetEcharts} from '@/utils/echarts'
export default {
  name: 'CallPoliceOnemonidey',

  data() {
    return {
      radio3: 'bar',
      formdata:{}
    };
  },

  mounted() {
    
  },

  methods: {
    getarrmethods(val) {
      this.formdata=val
      this.getpieechart(val)
      this.changradio(this.radio3)
    },
    // 获取饼图
    async getpieechart(val){
      const {data:{list}}=await getcompositionapi(val)
      const array = list.map(ele => {
        return {
          name: ele.equipName,
          value: ele.usageValue
        }
      })
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} <br/>占比 : {d} %',
        },
        color:['#18f2ce','#b367ff','#ffe566','#3090ff','#ff6698','#ffc75a','#ca8622','#bda29a'],
        legend: {
          orient: 'vertical',
          right: 'left',
          top:'center',
          type: "scroll",
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '75%',
            center: ['30%', '50%'],
            data:array,
            label: {
              fontSize: 18,
              show: false,
            },
          }
        ]
      };
      GetEcharts(this,this.$refs.pierefs,option)
    },
    async changradio(val) {
      const { data: { list } } = await gettrendlineapi(this.formdata)
      if(val=='line')this.getbarechart(list)
      if(val=='bar')this.getabarechart(list)
    },
    getbarechart(list) {
      const timePoints = list.find(ele => ele.datalist.length)?.datalist.map(item => item.timeReading)
      const series = list.map(ele => {
        return {
                name: ele.name,
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                data:ele.datalist.map(item => item.valueReading)
              }
      })
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        color:['#18f2ce','#b367ff','#ffe566','#3090ff','#ff6698','#ffc75a','#ca8622','#bda29a'],
        legend: {},
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: timePoints
          }
        ],
        yAxis: [
          {
            name:'(kWh)',
            type: 'value'
          }
        ],
        series: series
      };
      GetEcharts(this,this.$refs.linerefs,option)
    },
    async getabarechart(list) {
      const timePoints = list.find(ele => ele.datalist.length)?.datalist.map(item => item.timeReading)
      const series = list.map(ele => {
        return {
                name: ele.name,
                type: 'bar',
                stack: 'user',
                data:ele.datalist.map(item => item.valueReading)
              }
      })
      let option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              },
          },
          grid: {
              top:'4%',
              left: '2%',
              right: '2%',
              bottom: '2%',
              containLabel: true
          },
          xAxis: [

              {
                  type: 'category',
                  data: timePoints,
              }
          ],
          yAxis: [
              {
                  type: 'value',
              }
          ],
          color:['#18f2ce','#b367ff','#ffe566','#3090ff','#ff6698','#ffc75a','#ca8622','#bda29a'],
          series: series
      };
      GetEcharts(this,this.$refs.barrefs,option)
    }
  },
};
</script>
<style scoped>
.onemonidey{
  margin: 10px 0;
  height: 320px;
  display: flex;
  .echart{
    height: 100%;
    background-color: #fff;
    padding: 20px;
    .title{
      font-weight: bold;
      color: #000;
    }
  }
  .pieech{
    width: 30%;
    margin-right: 10px;
    .pie{
      margin-top:10px;
      height:89%
    }
  }
  .lineech{
    width: 70%;
    .linetit{
      display: flex;
      justify-content: space-between;
    }
    .lineandbar{
      height:85%;
      margin-top:10px;
    }
  }
}
</style>